//
// navbar.scss
// Extended from Bootstrap
//


//
// Bootstrap Overrides =======================
//

.navbar {
  border-bottom: 1px solid $border-color;
}


// Navbar brand

.navbar-brand {
  margin-right: 0;
}

.navbar-brand-img,
.navbar-brand > img {
  max-width: 100%;
  max-height: 1.5rem;
}


// Navbar collapse

.navbar-collapse {
  margin-left: -$navbar-padding-x;
  margin-right: -$navbar-padding-x;
  padding-left: $navbar-padding-x;
  padding-right: $navbar-padding-x;

  // Spacer to replace margin / padding as those
  // cause .navbar-collapse to "jump" when collapsing
  
  &:before {
    content: '';
    display: block;
    border-top: 1px solid $border-color;
    margin: $navbar-padding-y (-$navbar-padding-x);
  }
}


// Navbar navigaton

.navbar-nav {
  margin-left: -$navbar-padding-x;
  margin-right: -$navbar-padding-x;
}

.navbar-nav .nav-link {
  padding-left: $navbar-padding-x;
  padding-right: $navbar-padding-x;

  &.active {
    position: relative;

    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: $nav-link-padding-y;
      bottom: $nav-link-padding-y;
      border-left: 2px solid $primary;
    }
  }
}


// Navbar icons

.navbar-nav .nav-link > .fe {
  min-width: $navbar-icon-min-width; // Note: Test if we actually need this?
  padding-bottom: .125em;
  font-size: $font-size-lg;
  line-height: ($font-size-base * $line-height-base);
}


// Navbar dropdowns

.navbar-nav .dropdown-menu {
  border: none;
}

.navbar-nav .dropdown-menu .dropdown-menu {
  margin-left: $dropdown-item-padding-x / 2;
}


// Expanded
// 
// Expanded navbar specific styles

.navbar-expand {
  
  @each $breakpoint, $dimension in $grid-breakpoints {
      
    &-#{$breakpoint} {
        
      @include media-breakpoint-up(#{$breakpoint}) {
        padding-left: 0;
        padding-right: 0;


        // Container

        .navbar > [class*="container"] {
          padding-left: 0;
          padding-right: 0;
        }


        // Navbar collapse

        .navbar-collapse {
          flex-grow: inherit;
          
          &:before {
            display: none;
          }
        }


        // Navbar navigation

        .navbar-nav {
          margin-left: 0;
          margin-right: 0;
        }

        .navbar-nav .nav-link {

          // Increase $nav-link-padding-y value to align the underline
          // with the bottom of the navbar
          
          padding: .625rem $navbar-nav-link-padding-x;

          &.active {
            position: relative;

            &:before {
              top: auto;
              bottom: calc(-#{$navbar-padding-y} - 2px);
              right: $navbar-nav-link-padding-x;
              left: $navbar-nav-link-padding-x;
              border-left: 0;
              border-bottom: 1px solid $primary;
            }
          }
        }


        // Navbar dropdowns

        .navbar-nav .dropdown-menu {
          border: $dropdown-border-width solid $dropdown-border-color;
        }

        .navbar-nav .dropdown-menu .dropdown-menu {
          margin-left: 0;
        }

      }
    }
  }
}


//
// Dashkit ===================================
//


// Navbar fixed
//
// Adds special zindex to custom fixed-left and fixed-right classes

.navbar[class*="fixed-"] {
  z-index: $zindex-fixed;
}


// Navbar overflow
//
// Allows the navbar navigation overflow its parent container
// horizontally

.navbar-overflow {
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  margin-bottom: -$navbar-padding-y;
  overflow-x: auto;

  // Hide scrollbar

  &::-webkit-scrollbar {
    display: none;
  }
}

.navbar-overflow .navbar-nav {
  flex-direction: row;
  flex-wrap: nowrap;
  margin-left: -$navbar-nav-link-padding-x;
  margin-right: -$navbar-nav-link-padding-x;
}

.navbar-overflow .navbar-nav .nav-link {
  padding-bottom: ($nav-link-padding-y + $navbar-padding-y);

  &.active {

    &:before {
      bottom: 0;
    }
  }
}


// Navbar breadcrumb
//
// Applies special paddings to the navbar breadcrumb

.navbar-breadcrumb {
  padding: $navbar-breadcrumb-padding-y $navbar-breadcrumb-padding-x;
}


// Navbar user
//
// Navbar user notification area

.navbar-user {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.navbar-user .dropdown-toggle {

  // Remove the default dropdown arrow

  &:after {
    display: none;
  }
}


// Navbar link icon

.navbar-nav .nav-link > .fe {
  display: inline-block;
  min-width: $navbar-icon-min-width;
}


// Vertical
//
// Creates a vertically aligned version of the navbar

.navbar-vertical {

  // Navbar navigation

  .navbar-nav .nav-link {
    display: flex;
    align-items: center;
  }

  .navbar-nav .nav-link[data-toggle="collapse"] {

    &:after {
      display: block;
      content: '\e92e';
      font-family: 'Feather';
      margin-left: auto;
      color: $text-muted;
      transition: $transition-base;
    }

    // Expanded

    &[aria-expanded="true"] {

      &:after {
        transform: rotate(-180deg);
      }
    }
  }

  // Second level
  .navbar-nav .nav .nav-link {
    padding-left: $navbar-padding-x + $navbar-icon-min-width;
  }

  // Third level
  .navbar-nav .nav .nav .nav-link {
    padding-left: $navbar-padding-x * 1.5 + $navbar-icon-min-width;
  }


  // Navbar heading

  .navbar-heading {
    padding-top: $nav-link-padding-y;
    padding-bottom: $nav-link-padding-y;
    font-size: $font-size-xs;
    text-transform: uppercase;
    letter-spacing: .04em;
  }


  // Expanded
  // 
  // Expanded navbar specific styles
  
  &.navbar-expand {
    
    @each $breakpoint, $dimension in $grid-breakpoints {
        
      &-#{$breakpoint} {
          
        @include media-breakpoint-up(#{$breakpoint}) {
          display: block;
          position: fixed;
          top: 0; bottom: 0;
          width: 100%;
          max-width: $navbar-vertical-width;
          padding-left: $navbar-vertical-padding-x;
          padding-right: $navbar-vertical-padding-x;
          overflow-y: auto;

          // Container

          > [class*="container"] {
            flex-direction: column;
            align-items: stretch;
            min-height: 100%;
            padding-left: 0;
            padding-right: 0;

            // Target IE 10 & 11

            @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
              min-height: none;
              height: 100%;
            }
          }


          // Fixes the vertical navbar to the left

          &.fixed-left {
            left: 0;
            border-right: 1px solid $border-color;
          }


          // Fixed the vertical navbar to the right

          &.fixed-right {
            right: 0;
            border-left: 1px solid $border-color;
          }


          // Navbar collapse

          .navbar-collapse {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            margin-left: -$navbar-vertical-padding-x;
            margin-right: -$navbar-vertical-padding-x;
            padding-left: $navbar-vertical-padding-x;
            padding-right: $navbar-vertical-padding-x;

            > * {
              min-width: 100%;
            }
          }


          // Navbar navigation

          .navbar-nav {
            flex-direction: column;
            margin-left: -$navbar-vertical-padding-x;
            margin-right: -$navbar-vertical-padding-x;
          }

          .navbar-nav .nav-link {
            padding: $nav-link-padding-y $navbar-vertical-padding-x;

            &.active {

              &:before {
                top: $nav-link-padding-y;
                bottom: $nav-link-padding-y;
                left: 0; right: auto;
                border-left: 2px solid $primary;
                border-bottom: 0;
              }
            }
          }

          // Second level
          .navbar-nav .nav .nav-link {
            padding-left: $navbar-vertical-padding-x + $navbar-icon-min-width;
          }

          // Third level
          .navbar-nav .nav .nav .nav-link {
            padding-left: $navbar-vertical-padding-x * 1.5 + $navbar-icon-min-width;
          }


          // Navbar brand

          .navbar-brand {
            display: block;
            text-align: center;
            padding-top: (2rem - $navbar-padding-y);
            padding-bottom: (2rem - $navbar-padding-y);
          }

          .navbar-brand-img {
            max-height: 2.5rem;
          }


          // Navbar user

          .navbar-user {
            margin-left: -$navbar-vertical-padding-x;
            margin-right: -$navbar-vertical-padding-x;
            padding-top: $spacer;
            padding-bottom: $spacer - $navbar-padding-y;
            padding-left: $navbar-vertical-padding-x;
            padding-right: $navbar-vertical-padding-x;
            border-top: 1px solid $border-color;

            // Dropup menu

            .dropup .dropdown-menu {
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
      }
    }
  }
}